<template>
  <a-form :model="Model.params" :label-col="{ span: 7 }">
    <a-form-item label="用户名" name="username"
                 :rules="[ { required: true ,message: '用户名不能为空！', trigger: 'change'}]">
      <a-input placeholder="请输入用户名" v-model:value="Model.params.username">
        <template #prefix><UserOutlined style="color: rgba(0, 0, 0, 0.25)" /></template>
      </a-input>
    </a-form-item>
    <a-form-item label="密码" name="password"
                 :rules="[ { required: true ,message: '密码不能为空！', trigger: 'change'}]">
      <a-input-password placeholder="请输入密码" v-model:value="Model.params.password">
        <template #prefix><LockOutlined style="color: rgba(0, 0, 0, 0.25)" /></template>
      </a-input-password>
    </a-form-item>
    <a-form-item>
      <a-button type="primary" html-type="submit" block @click="Model.login()">登录</a-button>
      <a-button type="link" @click="Model.register()">没有账户？点我注册</a-button>
    </a-form-item>
  </a-form>
</template>
<script setup lang="ts">
import { LockOutlined, UserOutlined } from "@ant-design/icons-vue";
import Router from "@/router";
import Login from "@/api/login";
import { token } from "@/madoka";

const Model = (() => {
  const init = async () => {
    if (token.value) {
      await Router.push({ path: '/projectMana' });
    }
  }
  const register = () => {
    Router.push({ path: '/register'})
  }
  const login = async () => {
    if (!token.value){
      const res = await Login.login(s.params) as any
      token.value = res.data
    }
    await Router.push({ path: '/projectMana' })
  }
  const s = reactive({
    options: useLocalStorage("deptTree", []),
    params: {
      username: useLocalStorage("username", ""),
      password: useLocalStorage("password", "")
    },
    login,
    register
  });
  init()
  return s;
})();
</script>
<style scoped lang="less">

</style>